<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<style>
			#cd {
				padding: 10px;
			}
			/*  */
			p {
				color: black;
				font-size: 15px;
				margin-top: 10px;
			}

			.p {
				line-height: 28px;
			}

			a {
				color: black;
			}

			span {
				margin-top: 10px;
			}

			.btn {
				height: 28px;
				line-height: 14px;
				float: right;
				margin: 0 10px 0 0;
			}

			#mbtn {
				position: fixed;
				top: 92%;
				width: 100%;
				height: 70px;
				background-color: #efeff4;
			}

			#bt {
				display: block;
				margin: 12.5px auto;
				width: 90%;
				height: 45px;
				border-radius: 20px;
				line-height: 10px;
				font-size: 18px;
			}

			.mui-bar-nav~.mui-content {
				padding-bottom: 70px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的房屋</h1>
		</header>

		<div class="mui-content">
			<div id="liebiao">


			</div>
			<!-- <div id="cd" class="mui-card">
				<p><a>恒大城 </a> > <a> 一号楼</a> > <a> 二单元</a> > <a> 2102</a></p>
				<p id="p">租客
					<span id="col">审核中</span>
					<button type="button" class="btn mui-btn mui-btn-red">删除</button>
					<button type="button" class="btn mui-btn mui-btn-blue">编辑</button>
				</p>
			</div> -->
			<div id="mbtn">
				<button id="bt" type="button" class="mui-btn mui-btn-primary">绑定房屋</button>
			</div>
		</div>





		<script src="../js/mui.js"></script>
		<script src="../js/req.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script type="text/javascript">
			mui.init()

			function getList() {
				mui.ajax(apiurl + 'api/getRoomRecord', {
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						"Authorization": localStorage.getItem("token"),
					},
					success: function(data) {
						console.log(JSON.stringify(data))
						if (data.code == 200) {
							$("#liebiao").html("")
							mui.each(data.data, function(index, element) {

								var certState = ""
								var col = ""
								if (element.certState == 'wait_cert') {
									certState = "审核中";
									col = "orange"
								} else if (element.certState == 'success') {
									certState = "审核通过"
									col = "green"
								} else {
									certState = "审核未通过"
									col = "red"
								}
								var ele =
									`
							<div id="cd" class="mui-card">
								<p><a>${element.community} </a>  <a> ${element.building}</a>  <a> ${element.unit}</a>  <a> ${element.room}</a></p>
								<p class="p">${element.userType}
									<span style="color: ${col};">${certState}</span>
									<button type="button" class="btn mui-btn mui-btn-red">删除</button>
									<button type="button" class="btn mui-btn mui-btn-blue">编辑</button>
								</p>
							</div>
								`;
								$("#liebiao").append(ele)
							})
						}
					},
					error: function(xhr, type, errorThrown) {
						console.log(type)
					}
				});
			}



			mui.ready(function() {
				getList()
			})


			mui('body').on('tap', '#bt', function() {
				console.log("绑定成功")
				mui.openWindow('roomBind.html', 'roomBind', {})
			})
		</script>
	</body>

</html>